<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Intell Terminal - 使用指南</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome图标 -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFFB',
            dark: '#1D2939',
            light: '#F9FAFB',
            accent: '#7B61FF'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        transition: all 0.3s ease;
      }
      .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 8px 10px -6px rgba(22, 93, 255, 0.1);
      }
    }
  </style>
  
  <style>
    /* 平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    
    /* 渐变背景 */
    .gradient-bg {
      background: linear-gradient(135deg, #F9FAFB 0%, #EFF6FF 100%);
    }
    
    /* 步骤编号样式 */
    .step-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background-color: #165DFF;
      color: white;
      font-weight: bold;
      margin-right: 1rem;
      flex-shrink: 0;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fade-in {
      animation: fadeIn 0.5s ease forwards;
    }
    
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
  </style>
</head>

<body class="gradient-bg min-h-screen font-sans text-dark">
  <!-- 顶部导航 -->
  <header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-terminal text-primary text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold text-primary">Intell Terminal</h1>
      </div>
      <nav>
        <ul class="flex space-x-6">
          <li><a href="#guide" class="text-dark/80 hover:text-primary transition-colors duration-300 flex items-center">
            <i class="fa fa-book mr-2"></i>使用指南
          </a></li>
          <li><a href="#bug-solution" class="text-dark/80 hover:text-primary transition-colors duration-300 flex items-center">
            <i class="fa fa-wrench mr-2"></i>问题解决
          </a></li>
          <li><a href="#opensource" class="text-dark/80 hover:text-primary transition-colors duration-300 flex items-center">
            <i class="fa fa-github mr-2"></i>开源信息
          </a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- 英雄区域 -->
  <section class="py-16 md:py-24 container mx-auto px-4 text-center">
    <div class="max-w-3xl mx-auto">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-6 text-shadow">
        智能终端 <span class="text-primary">使用指南</span>
      </h1>
      <p class="text-lg md:text-xl text-dark/70 mb-10">
        详细了解如何高效使用 Intell Terminal 智能终端系统，提升您的工作效率
      </p>
      <a href="#guide" class="inline-flex items-center justify-center bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-lg hover:shadow-xl">
        开始阅读 <i class="fa fa-arrow-down ml-2"></i>
      </a>
    </div>
  </section>

  <!-- 主要内容区域 -->
  <main class="container mx-auto px-4 py-12 max-w-5xl">
    <!-- 使用指南部分 -->
    <section id="guide" class="mb-16">
      <div class="flex items-center mb-8">
        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mr-4">
          <i class="fa fa-list-ol text-primary text-xl"></i>
        </div>
        <h2 class="text-3xl font-bold text-dark">使用指南</h2>
      </div>
      
      <!-- 指南卡片列表 -->
      <div class="space-y-6">
        <!-- 指南1 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in">
          <div class="flex items-start">
            <div class="step-number">1</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">密钥申请与配置</h3>
              <p class="text-dark/70 leading-relaxed">
                使用本系统前需要去deepseek官网申请密钥，添加密钥并选中默认密钥后，才能进入本系统。否则不能正常使用。
              </p>
              <div class="mt-4 p-3 bg-primary/5 rounded-lg border border-primary/10 flex items-start">
                <i class="fa fa-external-link text-primary mt-1 mr-3"></i>
                <p class="text-sm text-dark/70">
                  前往申请：<a href="https://platform.deepseek.com/api_keys" target="_blank" class="text-primary hover:underline font-medium">https://platform.deepseek.com/api_keys</a>
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南2 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-100">
          <div class="flex items-start">
            <div class="step-number">2</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">AI助手介绍</h3>
              <p class="text-dark/70 leading-relaxed mb-4">
                该系统有两个AI助手，共享对话历史内容。
              </p>
              <ul class="space-y-3 pl-5 mb-4">
                <li class="flex items-start">
                  <i class="fa fa-terminal text-accent mt-1 mr-3"></i>
                  <span class="text-dark/70">命令行助手：只生成命令。一键可将命令搬运到终端上，直接运行，方便直接运行命令，无需复制粘贴。</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-comments text-secondary mt-1 mr-3"></i>
                  <span class="text-dark/70">对话助手：可以综合终端内的历史信息，进行多轮交互式问答。</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 指南3 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-200">
          <div class="flex items-start">
            <div class="step-number">3</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">多终端页支持</h3>
              <p class="text-dark/70 leading-relaxed">
                该系统可以新建多个终端页。每个终端页的AI助手互不影响。
              </p>
              <div class="mt-4 p-3 bg-secondary/5 rounded-lg border border-secondary/10 flex items-start">
                <i class="fa fa-lightbulb-o text-secondary mt-1 mr-3"></i>
                <p class="text-sm text-dark/70">
                  您可以为不同的工作任务创建独立的终端页，保持工作环境的整洁和专注。
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南4 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-300">
          <div class="flex items-start">
            <div class="step-number">4</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">目录树功能</h3>
              <p class="text-dark/70 leading-relaxed">
                该系统配有目录树，可以右击->转到，直接转移终端到相应目录下。
              </p>
              <div class="mt-4 flex justify-center">
                <div class="inline-block p-3 bg-gray-100 rounded-lg text-sm text-gray-600">
                  <i class="fa fa-folder mr-2"></i>目录树 → 右键点击 → 选择"转到" → 终端跳转
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南5 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in">
          <div class="flex items-start">
            <div class="step-number">5</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">常用命令快捷方式</h3>
              <p class="text-dark/70 leading-relaxed">
                本系统配置了一些常用命令，点击直接转移到终端上，修改参数即可运行。
              </p>
              <div class="mt-4 p-3 bg-accent/5 rounded-lg border border-accent/10 flex items-start">
                <i class="fa fa-rocket text-accent mt-1 mr-3"></i>
                <p class="text-sm text-dark/70">
                  利用常用命令功能可以大幅减少重复输入，提高工作效率。
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南6 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-100">
          <div class="flex items-start">
            <div class="step-number">6</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">命令行AI助手唤醒方式</h3>
              <p class="text-dark/70 leading-relaxed mb-4">
                命令行AI助手，需要将光标放到终端框内，并双击alt键，唤醒，再双击alt键隐藏。在主界面内可拖动。
              </p>
              <div class="p-4 bg-red-50 rounded-lg border border-red-100 flex items-start mb-4">
                <i class="fa fa-exclamation-triangle text-red-500 mt-1 mr-3"></i>
                <p class="text-sm text-dark/80 font-medium">
                  重要提示：软件每次打开第一次唤醒命令行助手，需要双击4次alt键，请特别注意。
                </p>
              </div>
              <div class="flex justify-center">
                <div class="inline-block p-3 bg-gray-100 rounded-lg text-sm text-gray-600">
                  光标定位到终端 → 双击Alt键唤醒 → 双击Alt键隐藏
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南7 -->
        <div class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-200">
          <div class="flex items-start">
            <div class="step-number">7</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">终端功能特性</h3>
              <p class="text-dark/70 leading-relaxed">
                本终端拥有cmd的基本上所有功能，支持命令回溯等常用终端功能。
              </p>
              <ul class="mt-4 space-y-2 pl-5">
                <li class="flex items-center">
                  <i class="fa fa-check text-green-500 mr-2"></i>
                  <span class="text-dark/70">完整的CMD命令支持</span>
                </li>
                <li class="flex items-center">
                  <i class="fa fa-check text-green-500 mr-2"></i>
                  <span class="text-dark/70">命令历史回溯功能</span>
                </li>
                <li class="flex items-center">
                  <i class="fa fa-check text-green-500 mr-2"></i>
                  <span class="text-dark/70">标准终端操作体验</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <!-- 指南8：Bug解决方法 -->
        <div id="bug-solution" class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-300">
          <div class="flex items-start">
            <div class="step-number">8</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">Bug问题解决方法</h3>
              <p class="text-dark/70 leading-relaxed mb-4">
                因为在考研期间开发，没有时间，不能穷尽解决所有bug，所以敬请原谅，如果遇到智能助手响应错误的情况，请尝试以下步骤：
              </p>
              <ul class="space-y-3 pl-5 mb-4">
                <li class="flex items-start">
                  <i class="fa fa-wrench text-primary mt-1 mr-3"></i>
                  <span class="text-dark/70">删除所有密钥，重新输入并配置</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-wrench text-primary mt-1 mr-3"></i>
                  <span class="text-dark/70">关闭软件重新打开，刷新系统状态</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-wrench text-primary mt-1 mr-3"></i>
                  <span class="text-dark/70">删除 <code class="bg-gray-100 px-2 py-1 rounded text-sm">keys_config.json</code> 和 <code class="bg-gray-100 px-2 py-1 rounded text-sm">selected_key.json</code> 两个配置文件后，重新打开软件</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-wrench text-primary mt-1 mr-3"></i>
                  <span class="text-dark/70">进入密钥管理界面，重新修改默认密钥，之后重新尝试使用</span>
                </li>
              </ul>
              <div class="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100 flex items-start">
                <i class="fa fa-hand-paper-o text-blue-500 mt-1 mr-3"></i>
                <p class="text-sm text-dark/70">
                  若上述方法仍无法解决问题，建议等待后续版本更新或关注开源后的社区支持。
                </p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 指南9：开源信息 -->
        <div id="opensource" class="bg-white rounded-xl shadow-md p-6 card-hover animate-fade-in delay-400">
          <div class="flex items-start">
            <div class="step-number">9</div>
            <div>
              <h3 class="text-xl font-semibold mb-3 text-dark">开源信息</h3>
              <p class="text-dark/70 leading-relaxed mb-4">
                本系统应该还有一些致命bug，不过现在没发现。如果有人后续发现，想修改，或者有人想基于此做二次开发，本系统将会于github/gitee开源。
              </p>
              <div class="p-4 bg-gray-50 rounded-lg border border-gray-100 flex items-start mb-4">
                <i class="fa fa-github text-gray-700 mt-1 mr-3 text-xl"></i>
                <div>
                  <p class="text-sm text-dark/80 font-medium mb-2">项目名称：<span class="text-primary font-bold">intell_terminal</span></p>
                  <p class="text-sm text-dark/70">
                    开源后可在GitHub或Gitee平台直接搜索项目名称获取源代码。目前尚未计划开源，若搜索不到，说明项目还未开源。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 结束语 -->
    <section class="text-center py-12 bg-white rounded-xl shadow-md mb-16">
      <h2 class="text-2xl font-bold text-dark mb-4">祝您开心使用</h2>
      <p class="text-dark/70 max-w-2xl mx-auto">
        感谢您选择 Intell Terminal 智能终端系统，希望本指南能帮助您更好地使用系统功能，提升工作效率。
      </p>
      <div class="mt-8">
        <a href="#guide" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors duration-300">
          <i class="fa fa-arrow-up mr-2"></i> 返回顶部
        </a>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-8">
    <div class="container mx-auto px-4 text-center">
      <div class="flex items-center justify-center space-x-2 mb-4">
        <i class="fa fa-terminal text-primary text-xl"></i>
        <h2 class="text-xl font-bold">Intell Terminal</h2>
      </div>
      <p class="text-white/70 text-sm">
        &copy; 2023 Intell Terminal. 保留所有权利。
      </p>
    </div>
  </footer>
</body>
</html>
